<template>
  <h2>自定义hook函数操作</h2>
  <h2>x:{{ x }},y:{{ y }}</h2>
  <h3 v-if="loading">正在加载中....</h3>
  <h3 v-else-if="errorMsg">错误信息:{{errorMsg}}</h3>
  <!-- <ul v-else>
    返回的数据:{{data}}
  </ul> -->
  <!-- 返回的数组数据  -->
  <ul v-else>
    返回的数据:{{data}}
  </ul>
</template>
<script lang='ts'>
import { defineComponent } from 'vue'
import useMousePosition from './hooks/useMousePosition'
import useRequest from './hooks/useRequest'


export default defineComponent({
  name: 'App',
  //需求1，用户在界面点击界面,在界面点击位置的横纵坐标收集起来并展示出来
  setup() {
    const { x, y } = useMousePosition()
    // 发送请求
    // const { loading, data, errorMsg } = useRequest('/data/address.json')  //获取对象数据
    const { loading, data, errorMsg } = useRequest('/data/products.json')  //获取数组数据
    return {
      x,
      y,
      loading,
      data,
      errorMsg
    }
  }
})
</script>
